<template>
    <!-- <div v-show="show">
        <el-dialog :model-value="true" title="添加成员"> -->
    <el-dialog :model-value="show" title="添加成员" @close="emit('hide')">
        <el-form :model="form" ref="formRef" :rules="rules">
            <el-form-item label="账号" prop="username">
                <el-input v-model="form.username" autocomplete="off" />
            </el-form-item>
            <el-form-item label="姓名" prop="nickName">
                <el-input v-model="form.nickName" autocomplete="off" />
            </el-form-item>
            <el-form-item label="邮箱" prop="email">
                <el-input v-model="form.email" autocomplete="off" />
            </el-form-item>
            <el-form-item label="密码" prop="password">
                <el-input v-model="form.password" type="password" autocomplete="off" />
            </el-form-item>
            <el-form-item label="备注">
                <el-input v-model="form.note" :rows="3" type="textarea" />
            </el-form-item>
            <el-form-item label="是否启用">
                <el-radio-group v-model="form.status" class="ml-4">
                    <el-radio :label="1">是</el-radio>
                    <el-radio :label="0">否</el-radio>
                </el-radio-group>
            </el-form-item>
        </el-form>
        <template #footer>
            <span class="dialog-footer">
                <el-button>取消</el-button>
                <el-button type="primary" @click="submitFn">确认</el-button>
            </span>
        </template>
    </el-dialog>

    <!-- </div> -->

</template>
<script setup lang='ts'>
import { reactive, ref, watch } from "vue"
import { ElMessageBox, FormInstance, ElMessage } from "element-plus";
import { addUserApi, getUserByIdApi, updateUserApi } from "./api"

const props = defineProps({
    show: {
        type: Boolean,
        default: false,
    },
    id: {
        type: Number,
        default: 0
    }
})
watch(
    () => props.id,
    () => {
        if (props.id !== 0) {
            getUserByIdApi(props.id).then((res) => {
                if (res.code === 200) {
                    Object.assign(form, res.data)
                }
            })
        } else {
            formRef.value?.resetFields();
        }
    }
)
const emit = defineEmits(["hide"])
const form = reactive<IUserModel>({
    username: "",
    password: "",
    email: "",
    nickName: "",
    status: 0,
    note: ""
});
const validateEmail = (rule: any, value: string, cb: any) => {
    if (!/^\w+[@]\w+[.]\w+/.test(value)) {
        return cb(new Error("邮箱格式不正确"));
    } else {
        cb();
    }
};
const formRef = ref<FormInstance>();
const rules = {
    username: [{ required: true, trigger: 'blur', message: "请输入账号" }],
    nickName: [{ required: true, trigger: 'blur', message: "请输入姓名" }],
    password: [{ required: true, trigger: 'blur', message: "请输入密码" }],
    email: [{ required: true, validator: validateEmail, trigger: "blur" }],
}
const addUser = () => {
    ElMessageBox.confirm(
        '确定要修改当前用户吗？',
        '修改用户信息',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
        }).then(() => {
            addUserApi(form).then((res) => {
                if (res.code === 200) {
                    emit("hide", true);
                    formRef.value?.resetFields();
                }
            });
        }).catch(() => {
            console.log("点击的取消");

        })
}
const editUser = () => {
    ElMessageBox.confirm(
        '确定要修改当前用户吗？',
        '修改用户信息',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
        }).then(() => {
            updateUserApi(form).then((res) => {
                if (res.code === 200) {
                    ElMessage.success("修改成功");
                    formRef.value?.resetFields();
                    emit("hide", true)
                }
            })
        }).catch(() => { })
}
const submitFn = () => {
    formRef.value?.validate((ok: boolean) => {
        if (ok) {
            if (props.id === 0) {
                addUser();
            } else {
                editUser();
            }

        } else {

        }
    })
}
</script>
<style lang="scss" scoped>

</style>